<template>
  <el-dialog
    @close="close"
    title="新增&编辑游戏"
    :visible.sync="dialogComponents"
    width="35%"
    :modal-append-to-body=false
  >
    <el-form ref="formInline" size="mini" :rules="rules" :model="formInline" label-width="100px">
        <el-form-item prop="account" label="大区名称" >
          <el-input placeholder="比如 电信、网通、全网通" v-model="bigServer" :disabled = disableAccount class="gameed_inpu"></el-input>
        </el-form-item>

      <el-form-item prop="account" label="服务器名称" v-for="(item,index) in server_list" :key="index">
        <el-input placeholder="请填写大区下的服务器" v-model="item.value" :disabled = disableAccount class="gameed_inpu"></el-input>
        <span @click="addAreaServer">
            <img height="25px" src="@/assets/add.png">
            <span>增加服务器</span>
        </span>
        <span @click="deleteServer(index)">删除</span>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :disabled="btnLoading" @click="dialogComponents = false">取 消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="onSubmit()">确 定</el-button>
    </span>
  </el-dialog>

</template>
<script>
  //import { addUserAPI,getDetailAPI ,updateAdminAPI } from '@/api/user'
  export default {
    name: 'AddServer',
    props: {
      dialogComponents: {
        default: false,
        type: Boolean
      },
      name: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        server_list:[{value:"2"}],
        dialog: true,
        btnLoading: false,  // 提交按钮状态
        disableAccount : false,
        formInline: {
          Id:'',
          account:'',
          password:'',
          show_name:'',
          phone:'',
          role: '2',
          operator:'admin'
        },
        roleList: [],
        bigServer:'',
        rules: {
         /* account: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ]*/
        }
      }
    },
    mounted() {
      this.dialog = this.dialogComponents
      if (this.name) {
      }else{

      }
    },
    methods: {
      // 添加区服
      addAreaServer(){
        let inputParam = {value:''};
          this.server_list.push(inputParam)
      },
      // 删除区服事件
      deleteServer(index){
        this.server_list.splice(index,1)
      },
      // 关闭弹窗
      close() {
        this.$emit('close')
      },
      // 提交信息
      onSubmit() {
        let arr = [1,2,3]
        this.$emit('bigServer',this.bigServer)
        this.$emit('smallServer',arr)
        this.dialogComponents = false
      },
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .gameed_inpu{
    width:350px;
  }

</style>


